<!--
 * @Author: jqm123 2289662078@qq.com
 * @Date: 2025-04-06 08:35:31
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-05-27 15:02:14
 * @FilePath: homeListItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { computed } from "vue";
// 定义 props
const props = defineProps({
  type: {
    default: 0,
    type: Number,
  }, // 0 养车小课堂 1精选好物 2直播
  item: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

// 数据
const typeName = [
  {
    name: "养车小课堂",
    color: "#fec739",
  },
  {
    name: "精选好物",
    color: "#2dcc63",
  },
  {
    name: "正在直播",
    color: "#008cf0",
  },
];

// 计算属性
const getColor = computed(() => {
  return typeName[props.type].color;
});
</script>

<template>
  <div class="item">
    <div class="pic">
      <van-image width="100%" height="100%" :src="item.thumbnail" radius="8px 8px 0 0" fit="contain" />
    </div>
    <div class="info">
      <div class="text van-multi-ellipsis--l2">{{ item.goodsName }}</div>
      <div class="price">￥ {{ item.price }}</div>
    </div>
    <div class="type" :style="{ backgroundColor: getColor }">
      {{ typeName[type].name }}
    </div>
  </div>
</template>


<style lang="less" scoped>
.item {
  width: 49%;
  margin-bottom: 20px;
  position: relative;
  background: #ffffff;
  border-radius: 20px;

  .pic {
    width: 100%;
    aspect-ratio: 1;
  }

  .info {
    padding: 0 10px 15px 10px;
  }

  .text {
    width: 100%;
    padding: 20px 15px 10px 15px;
    font-size: 40px;
  }

  .price {
    font-size: 46px;
    color: #c10500;
    font-weight: bold;
  }

  .type {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 20px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 2px;
  }
}
</style>

